<template>
  <div class="wraper-box">
    <MHeader>
      <slot>注册</slot>
    </MHeader>
    <div class="user-login"></div>
    <cube-form :model="model" @submit="submitHandler">
      <cube-form-item :field="fields[0]"></cube-form-item>
      <cube-form-item :field="fields[1]"></cube-form-item>
      <cube-form-item :field="fields[2]"></cube-form-item>
      <cube-form-item :field="fields[3]"></cube-form-item>
    </cube-form>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import { regisgter } from "@/api/account/login.js";
import { mapActions } from "vuex";
import * as types from '../store/types'
export default {
  components: {
    MHeader
  },
  data() {
    return {
      validity: {},
      valid: undefined,
      model: {
        email: "",
        password: "",
        username: ""
      },
      fields: [
        {
          type: "input",
          label: "邮箱",
          props: {
            placeholder: "邮箱"
          },
          rules: {
            required: true
          },
          modelKey: "email"
        },
        {
          type: "input",
          label: "昵称",
          props: {
            placeholder: "请输入昵称"
          },
          rules: {
            required: true
          },
          modelKey: "username"
        },
        {
          type: "input",
          label: "密码",
          props: {
            placeholder: "请输入密码",
            type: "password"
          },
          rules: {
            required: true
          },
          modelKey: "password"
        },
        {
          type: "submit",
          label: "注册",
          props: {
            primary: true
          }
        }
      ]
    };
  },
  methods: {
    ...mapActions('account',[types.TO_REGISTER]),
    submitHandler(e, model) {
      e.preventDefault();
      this[types.TO_REGISTER](model).then(
        res => {
          const toast = this.$createToast({
            type: "txt",
            time: 1000,
            txt: res,
            // 设置回掉事件  设置会造成 Toast 无法显示
            onTimeout: () => {
              this.$router.replace("/login");
            }
          });
          toast.show();
        }
      );
    },
    validateHandler(result) {
      this.validity = result.validity;
      this.valid = result.valid;
    }
  }
};
</script>
<style lang="less">
.user-login {
  width: 62px;
  height: 62px;
  background: url("../public/images/login_bg1.png") center center no-repeat;
  background-size: cover;
  margin: 0.94rem auto 0 auto;
}
</style>